<template>
	<view class="example-body">
		<uni-grid :column="3" :show-border="false" :square="false"  @change="change">
			<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
				<view class="grid-item-box">
					<image class="image" :src="item.code" mode="scaleToFill" />
					<text class="text">{{item.text}}</text>
					<view v-if="item.badge" class="grid-dot">
						<uni-badge :text="item.badge" :type="item.type" />
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>
<script>
	import { mapGetters } from 'vuex';
  import { getAllAlarm } from '../../api/alarm'
	export default {
		data() {
			return {
        list: [{
          code: "../../static/icon/alarm/waterSoil.png",
          text: "水土流失",
          url: "/pages/alarm/waterSoil/index",
          type: "error",
          badge: 0,
        }, {
          code: "../../static/icon/alarm/waterWorsen.png",
          text: "水质恶化",
          url: "/pages/alarm/waterWorsen/index",
          type: "error",
          badge: 0,
        }, {
          code: "../../static/icon/alarm/waterAnimal.png",
          text: "水生物存活条件",
          url: "/pages/alarm/waterAnimal/index",
          type: "error",
          badge: 0,
        }, {
          code: "../../static/icon/alarm/foreignSpecies.png",
          text: "外来物种",
          url:  "/pages/alarm/foreignSpecies/index",
          type: "error",
          badge: 0,
        }, {
          code: "../../static/icon/alarm/vegetation.png",
          text: "植被破坏",
          url: "/pages/alarm/vegetation/index",
          type: "error",
          badge: 0,
        }, {
          code: "../../static/icon/alarm/fishDegrade.png",
          text: "渔业种群退化",
          url: "/pages/alarm/fishDegrade/index",
          type: "error",
          badge: 0,
        }, {
          code: "../../static/icon/alarm/peopleDestroy.png",
          text: "破坏性人类行为",
          url:  "/pages/alarm/peopleDestroy/index",
          type: "error",
          badge: 0,
        },
        //   {
        //   code: "../../static/icon/alarm/alarmHandle.png",
        //   text: "通用告警",
        //   url: "/pages/alarm/waterSoil",
        //   type: "error",
        //   badge: 0,
        // }
        ]
      }
		},
		computed:{
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		onLoad(){
			this.getBusinessData()
		},
		methods: {
			//获取处置状态
      getBusinessData(){
        getAllAlarm().then(res => {
          if(res.data.waterSoilAlarms != null) {
            this.list[0].badge = res.data.waterSoilAlarms.length
          }
          if(res.data.waterWorsenAlarms != null) {
            this.list[1].badge = res.data.waterWorsenAlarms.length
          }
          if(res.data.waterAnimalAlarms != null) {
            this.list[2].badge = res.data.waterAnimalAlarms.length
          }
          if(res.data.foreignSpeciesAlarms != null) {
            this.list[3].badge = res.data.foreignSpeciesAlarms.length
          }
          if(res.data.vegetationAlarms != null) {
            this.list[4].badge = res.data.vegetationAlarms.length
          }
          if(res.data.fishDegradeAlarms != null) {
            this.list[5].badge = res.data.fishDegradeAlarms.length
          }
          if(res.data.peopleDestroyAlarms != null) {
            this.list[6].badge = res.data.peopleDestroyAlarms.length
          }
				});
			},
			change(e) {
				uni.navigateTo({
					url: this.list[e.detail.index].url,
				})
			},
		}
	}
</script>


<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
		height: 1450rpx;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.image {
		width: 150rpx;
		height: 150rpx;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		border: 0px solid #000000;
	}
	
	/*右上角图标 */
	.grid-dot {
		position: absolute;
		top: 8px;
		right: 12px;
	}
	
	
</style>